<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=eOkB1gISUYkjd8UcC16N9B10MvKvlTvN"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap",{enableMapClick:false});    // 创建Map实例
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
			BMAP_NORMAL_MAP,
			BMAP_HYBRID_MAP
		]}));
	//初始化南宁市 放大级别13
	map.centerAndZoom(new BMap.Point(108.3733749001,22.8229869980),13);
	//添加左上角缩放平移控件
	map.addControl(new BMap.NavigationControl());
	//添加左下角比例尺
	map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));
	//开启鼠标滚轮缩放
	map.enableScrollWheelZoom(true);
	
	var marks = [
	{id:1,name:'南宁第二中学(凤岭)',lon:108.427911,lat:22.829105,icon:'img/school.png',context:'这个中学好厉害啊',viewImg:'img/1.jpg'},
	{id:2,name:'百花苑小区',lon:108.427279,lat:22.824994,icon:'img/neighbourhoods.png',context:'这个小区好像住起来很舒服',viewImg:'img/2.jpg'},
	{id:3,name:'凤岭名园',lon:108.425842,lat:22.832846,icon:'img/neighbourhoods.png',context:'这个小区看上去好高大上',viewImg:'img/3.jpg'},
	{id:4,name:'东方皇城花园',lon:108.418485,lat:22.831506,icon:'img/neighbourhoods.png',context:'这个小区名字看起来很厉害',viewImg:'img/4.jpg'},
	{id:5,name:'凤岭山语城',lon:108.421826,lat:22.826318,icon:'img/neighbourhoods.png',context:'这里描述我也不知道该说啥',viewImg:'img/5.jpg'},
	{id:6,name:'红星小区',lon:108.434182,lat:22.82713,icon:'img/neighbourhoods.png',context:'看起来这个小区好小啊',viewImg:'img/6.jpg'}
	];
	
	var polys = [
	{color:"#9B30FF",coordinate:
	"108.425882,22.825535;108.425918,22.827591;108.425711,22.828466;108.424867,22.830598;108.425361,22.830689;108.425397,22.830681;108.425711,22.830806;"
	+"108.427984,22.83158;108.428747,22.831514;108.428909,22.83133;108.428954,22.830731;108.430418,22.830056;108.430787,22.829723;108.430787,22.829723;"
	+"108.4312,22.828982;108.43129,22.828532;108.43111,22.827283;108.427517,22.826034;108.42625,22.82561"},
	{color:"#9B30FF",coordinate:
	"108.433711,22.827587;108.433953,22.827662;108.434452,22.827775;108.434663,22.827271;108.434802,22.826896;108.434429,22.826642;108.434128,22.826463;"
	+"108.433994,22.826513;108.433868,22.826946"},
	{color:"#9B30FF",coordinate:
	"108.425473,22.825197;108.426044,22.825276;108.428703,22.82618;108.428595,22.825177;108.428972,22.824931;108.429075,22.824827;108.429012,22.824635;"
	+"108.428554,22.824377;108.427629,22.824344;108.427077,22.824365;108.427077,22.824365;108.425832,22.824539;108.425563,22.824773;108.425473,22.825193"},
	{color:"#9B30FF",coordinate:
	"108.41874,22.828333;108.419746,22.828299;108.420276,22.828183;108.421902,22.827458;108.422226,22.827408;108.423385,22.827442;108.423385,22.827442;"
	+"108.423394,22.826946;108.423645,22.826821;108.425087,22.826838;108.425172,22.825893;108.425329,22.825859;108.425338,22.82546;108.423542,22.825306;"
	+"108.42104,22.825218;108.420492,22.825984;108.420308,22.826201;108.41932,22.827229;"},
	{color:"#FF0000",coordinate:
	"108.39008,22.831181;108.391948,22.831297;108.392002,22.830598;108.392496,22.829423;108.392326,22.829115;108.392218,22.829065;108.391769,22.829165;"
	+"108.391463,22.829465;108.391194,22.830202;108.39092,22.83056;108.390924,22.830556;108.390803,22.830602;108.39012,22.830643;108.390084,22.830685;"},
	{color:"#FF0000",coordinate:
	"108.389819,22.832146;108.389819,22.832146;108.391037,22.832434;108.391216,22.832579;108.3914,22.832796;108.391549,22.832888;108.392303,22.832829;"
	+"108.392303,22.832829;108.392582,22.832201;108.392564,22.831393;108.392514,22.831347;108.390062,22.831231;108.389972,22.831705"},
	{color:"#FF0000",coordinate:
	"108.393058,22.833854;108.393148,22.833912;108.394971,22.834249;108.395317,22.833566;108.395241,22.832538;108.395492,22.831614;108.395074,22.831509;"
	+"108.394796,22.831043;108.394845,22.830352;108.393866,22.830285;108.39317,22.830335;108.392932,22.830502;108.392788,22.830727;108.392721,22.831455;"
	+"108.392716,22.832055;"},
	{color:"#FF0000",coordinate:
	"108.390066,22.827417;108.39295,22.827396;108.392968,22.827362;108.392981,22.825676;108.392555,22.825601;108.392285,22.825464;108.392676,22.824981;"
	+"108.391549,22.824056;108.390834,22.82424;108.390066,22.824356"
	+""},
	];
	
	//addMar(marks);
	
	addpoly(polys);
	
	/**
	 * 添加标记
	 * @param [{id:主键,name:名称,lon:经度,lat:纬度,icon:图标,context:弹窗内容,viewImg:弹窗图片},...] data
	 */
	function addMar(data){
		for(var i = 0; i < data.length; i++){
			var marker = new BMap.Marker(new BMap.Point(data[i].lon, data[i].lat),{icon:new BMap.Icon(data[i].icon, new BMap.Size(50,50))});  // 创建标注
			marker.setTitle(data[i].name);
			marker.dataCont = data[i];
			
			map.addOverlay(marker);
			
			marker.addEventListener("click", function(e){   
				var viewWin = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+e.target.dataCont.name+"</h4>" + 
				"<img style='float:right;margin:4px' id='imgDemo' src='"+e.target.dataCont.viewImg+"' width='139' height='104' title='"+e.target.dataCont.name+"'/>" + 
				"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+e.target.dataCont.context+"</p>" + 
				"</div>";
				var infoWindow = new BMap.InfoWindow(viewWin);
				this.openInfoWindow(infoWindow);
				//图片加载完毕重绘infowindow
				document.getElementById('imgDemo').onload = function (){
					infoWindow.redraw();//防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
				}
			});
		}
	}
	
	/**
	 * 
	 * @param [{color:颜色代码(#ff0000),coordinate:"经度,纬度;经度,纬度;..."},...] data
	 */
	function addpoly(data){
		for(var i = 0; i < data.length; i++){
			var ply = new BMap.Polygon(data[i].coordinate, {strokeWeight: 2, strokeColor: data[i].color}); //建立多边形覆盖物
			map.addOverlay(ply);
		}
		
	}
</script>
